<script lang="ts" setup>
import { computed, ref } from 'vue';
import { NButton, NInput, NSelect, useMessage, NUpload, UploadFileInfo } from 'naive-ui';
import type { Language, Theme } from '@/store/modules/app/helper';
import { SvgIcon } from '@/components/common';
import { useAppStore, useUserStore } from '@/store';
import type { UserInfo } from '@/store/modules/user/helper';
import { getToken } from '@/store/modules/auth/helper';
import { t } from '@/locales';
import avatarImg from '@/assets/avatar.jpg';
import { updateUserLogin } from '@/api/accountSetting';

const message = useMessage();
const appStore = useAppStore();
const userStore = useUserStore();

const ms = useMessage();

const emit = defineEmits(['close']);

const theme = computed(() => appStore.theme);

const userInfo = computed(() => userStore.userInfo);

const name = ref(userInfo.value.name ?? '');

const language = computed({
  get() {
    return appStore.language;
  },
  set(value: Language) {
    appStore.setLanguage(value);
  }
});

const themeOptions: { label: string; key: Theme; icon: string }[] = [
  {
    label: 'Auto',
    key: 'auto',
    icon: 'ri:contrast-line'
  },
  {
    label: 'Light',
    key: 'light',
    icon: 'ri:sun-foggy-line'
  },
  {
    label: 'Dark',
    key: 'dark',
    icon: 'ri:moon-foggy-line'
  }
];

const languageOptions: { label: string; key: Language; value: Language }[] = [
  { label: '简体中文', key: 'zh-CN', value: 'zh-CN' },
  { label: 'English', key: 'en-US', value: 'en-US' }
];

function updateUserInfo(options: Partial<UserInfo>) {
  userStore.updateUserInfo(options);
  ms.success(t('common.success'));
}

let fileList = ref<UploadFileInfo[]>([
  {
    id: 'avatar',
    name: '头像预览',
    status: 'finished',
    url: userInfo.value.avatar ? userInfo.value.avatar : avatarImg
  }
]);

const token = getToken();
const headers = {
  Authorization: `Bearer ${token}`
};

function handleFinish({ event }: { file: UploadFileInfo; event?: ProgressEvent }) {
  const response = JSON.parse((event?.target as XMLHttpRequest).response);
  if (response.code === 200) {
    const imageUrl = import.meta.env.VITE_GLOB_APP_IMG_URL + response.data;
    fileList.value[0].url = imageUrl;
    // 不再自动保存，等待用户点击保存按钮
    message.success('头像上传成功，请点击保存按钮提交更改');
  } else {
    message.error('上传失败！');
  }
}

function handleSaveUserInfo() {
  const avatarUrl = fileList.value[0].url || '';
  const username = name.value;
  updateUserLogin({ avatar: avatarUrl, username })
    .then(() => {
      updateUserInfo({ avatar: avatarUrl, name: username });
      setTimeout(() => {
        emit('close');
      }, 500);
    })
    .catch(() => {
      message.error('保存头像和名称失败！');
    });
}
</script>

<template>
  <div class="p-4 space-y-5 min-h-[200px] flex flex-col h-full">
    <div class="space-y-6 flex-1">
      <div class="flex items-center space-x-4">
        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.avatarLink') }}</span>
        <n-upload action="/wechatapi/file/Upload" :max="1" list-type="image-card" :default-file-list="fileList" :headers="headers" @finish="handleFinish">
          点击上传
        </n-upload>
      </div>

      <div class="flex items-center space-x-4">
        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.name') }}</span>
        <div class="w-[200px]">
          <NInput v-model:value="name" placeholder="" />
        </div>
      </div>

      <!-- <div class="flex items-center space-x-4">
        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.theme') }}</span>
        <div class="flex flex-wrap items-center gap-4">
          <template v-for="item of themeOptions" :key="item.key">
            <NButton size="small" :type="item.key === theme ? 'primary' : undefined" @click="appStore.setTheme(item.key)">
              <template #icon>
                <SvgIcon :icon="item.icon" />
              </template>
            </NButton>
          </template>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.language') }}</span>
        <div class="flex flex-wrap items-center gap-4">
          <NSelect style="width: 140px" :value="language" :options="languageOptions" @update-value="(value) => appStore.setLanguage(value)" />
        </div>
      </div> -->
    </div>
    <div class="flex justify-end pt-6">
      <NButton type="primary" size="large" round @click="handleSaveUserInfo">
        {{ $t('common.save') }}
      </NButton>
    </div>
  </div>
</template>
